<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-btns">
            <button nz-button nzType="primary" (click)="showModal()" *ngIf="permission.userPermission.has('config:configAddress:add')">新增地址</button>
        </div>

        <div class="common-search-forms">
            <div class="common-form-item">
                <div class="common-search-conrol">
                    <input type="text" nz-input placeholder="请输入地址简称" [(ngModel)]="query_params_Json.name" />
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="backList()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="m-t-2">
    <div class="pagination-wrap-position table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="query_params_Json.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)">
            <thead>
                <tr>
                    <th nzAlign="center">ID</th>
                    <th nzAlign="center">简称</th>
                    <th nzAlign="center">联系人</th>
                    <th nzAlign="center">联系方式</th>
                    <th nzAlign="center">地区</th>
                    <th nzAlign="center">详细地址</th>
                    <th nzAlign="center">状态</th>
                    <th nzAlign="center">操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <td nzAlign="center">{{ data.id }}</td>
                    <td nzAlign="center">{{ data.name }}</td>
                    <td nzAlign="center">{{ data.contacts ? data.contacts : '-' }}</td>
                    <td nzAlign="center">{{ data.tel }}</td>
                    <td nzAlign="center">{{ data.region }}</td>
                    <td nzAlign="center">{{ data.address }}</td>
                    <td nzAlign="center">{{ data.status == 0 ? '启用'  : '禁用' }}</td>
                    <td nzAlign="center">
                        <button
                            *ngIf="permission.userPermission.has('config:configAddress:edit')"
                            nz-button
                            nzType="link"
                            (click)="showModal(data.id)">
                            编辑
                        </button>
                        <a
                            *ngIf="permission.userPermission.has('config:configAddress:delete')"
                            nz-button
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除吗?"
                            [nzIcon]="iconTpl"
                            (nzOnConfirm)="confirm(data.id)">
                            删除
                        </a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<nz-modal [(nzVisible)]="isVisible" nzTitle="地址信息" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()">
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>简称</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入简称!">
                    <input nz-input formControlName="name" [maxLength]="20" placeholder="请输入简称" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>联系人</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入联系人!">
                    <input nz-input formControlName="contacts" [maxLength]="20" placeholder="请输入联系人" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>联系方式</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入联系方式!">
                    <input nz-input formControlName="tel" [maxLength]="20" placeholder="请输入联系方式" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>地区</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请选择地区!">
                    <nz-cascader [nzOptions]="nzOptions" formControlName="districtId" nzPlaceHolder="请选择" [nzAllowClear]="true">
                    </nz-cascader>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>详细地址</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入详细地址!">
                    <input nz-input formControlName="address" [maxLength]="100" placeholder="请输入详细地址" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>缓存key</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请输入缓存key!">
                    <input nz-input formControlName="key" [maxLength]="100" placeholder="请输入缓存key" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired>状态</nz-form-label>
                <nz-form-control [nzSpan]="20">
                    <nz-radio-group formControlName="status">
                        <label nz-radio nzValue="0">启用</label>
                        <label nz-radio nzValue="1">禁用</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control [nzSpan]="8" [nzOffset]="4">
                    <button nz-button nzType="primary">保存</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </ng-container>
</nz-modal>
